<template>
  <!-- 车辆选择 -->
  <div>
    <TopFilter ref="topFilter" :cols="4" :list="topFilterList" @filterChange="handleSearch" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="repair_repairReception_customer_vehicleChoice"
      height="auto"
      :maxHeight="300"
      :columns="columns"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :datakey="'rows'"
      selectionType="single"
      :onSyncTableData="handleSyncTableData"
      :onRowSelectChange="handleTableRowSelect"
      :onColumnsChange="columns => (this.columns = columns)"
    >
    </FilterTable>

    <div class="dialogBottmView">
      <multiuse-button @click="handleCancel">关闭</multiuse-button>
      <multiuse-button type="primary" :click="handleConfirm" :disabled="disableds">确定</multiuse-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { confirmAction, notifyAction, jsonToHump } from '@/utils';
import { getAppId } from '@/assets/js/auth';

// import { queryRepairVehicleList } from '@/api/repair/common';
import {queryVinList} from '@/api/serviceass/qualityManage/feedback';
import { getUserByVinAndMobileFromJH } from '@/api/repair/repairReception/customer';

import {mapGetters,mapMutations} from 'vuex'

export default {
  mixins: [dictionary],
  props: {
    vinOne: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedRows:[],// 选中项
      topFilterList: this.createTopFIlterList(),
      columns: this.createTableColumns(),
      fetchapi: queryVinList,// 接口
      fetchParams: { xhrAbort: true },
      syncTableData: [] // 同步的table数据
    };
  },
  mounted() {
    console.log(this.vinOne, 'vinOne');
    if (this.vinOne && this.vinOne != null && this.vinOne != '') {
      this.topFilterList.find(x => x.fieldName == 'vin').initialValue = this.vinOne;
      this.handleSearch({ vin: this.vinOne });
    }
  },
  computed:{
    disableds(){
      return this.selectedRows.length === 0
    }
  },
  methods: {
    ...mapMutations('qualityManage',['SET_STATE_BY_NAME']),
    /**
     * 筛选条件
     */
    createTopFIlterList() {
      return [
        { type: 'INPUT', label: '车牌号', fieldName: 'license'},
        {type: 'INPUT', label: 'VIN',fieldName: 'vin'},
        {type: 'INPUT',label: '车主',fieldName: 'ownerName'}
      ];
    },
    /**
     * table header
     */
    createTableColumns() {
      return [
        {title: '序号',dataIndex: 'index',width: 80,sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        { title: '车牌号',dataIndex: 'LICENSE', sorter: true, showOverflowTooltip: true },
        { title:'VIN',dataIndex:'VIN',width:180,sorter:true,showOverflowTooltip:true},
        {title:'发动机号',dataIndex:'ENGINE_NO',showOverflowTooltip:true,sorter:true},
        {title:'车主',dataIndex:'OWNER_NAME',width:180,showOverflowTooltip:true,sorter:true},
        {title:'品牌',dataIndex:'BRAND_NAME',sorter:true,showOverflowTooltip:true},
        {title:'车系',dataIndex:'SERIES_NAME',sorter:true,showOverflowTooltip:true},
        {title:'车型',dataIndex:'MODEL_NAME',sorter:true,showOverflowTooltip:true},
        {title:'上次进厂里程',dataIndex:'LAST_MAINTAIN_MILEAGE',sorter:true}
      ];
    },




    collapseHandle() {
      this.nextTick(() => {
        this.refs.table.EXECUTE_RESET_HEIGHT();
      });
    },
    // 点击搜索
    handleSearch(e) {
      this.fetchParams = Object.assign({ xhrAbort: false }, e);
    },
    // 同步table数据
    handleSyncTableData(list) {
      this.syncTableData = list;
    },
    // 行项选中函数 || 清空
    handleTableRowSelect(list) {
      this.selectedRows = list;
    },
    // 点击取消
    handleCancel() {
      this.$emit('close');
    },
    // 点击确定
    handleConfirm() {
      this.$emit('onConfirm', this.selectedRows);
      this.closeDialog('isShowCarDialog')
    },
     // 关闭弹窗
    closeDialog(name){
      this.setStateParam(name,false)
    },
     /**
     * 修改 store 中的参数 name 为 value
     */
    setStateParam(name,value){
      const params = { name, value }
      this.SET_STATE_BY_NAME(params)
    },
  }
};
</script>
